<script setup>
import { ref, onMounted } from 'vue'
import userApi from '@/apis/admin/userApi.js'
import userEnum from '@/enums/userEnum.js'
import commonConstant from '@/enums/commonConstant.js'
import PaginationComponent from '@/components/PaginationComponent.vue'
import enumUtil from '@/utils/enumUtil.js'

const userSearchCondition = ref({
  userNickname: '',
  username: '',
  userStatus: null,
  userType: null
})
const paginationData = ref({ ...commonConstant.PAGINATION })
const userTableList = ref([])
const drawerData = ref({
  visible: false,
  title: ''
})
const waitUpdateUserData = ref({})

onMounted(() => {
  handlePageSelectUser()
})

// 更新用户
const handleUpdateUser = async () => {
  await ElMessageBox.confirm(`是否确认执行该操作?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await userApi.updateUserById(waitUpdateUserData.value)
      await handleCloseDrawer()
      await handlePageSelectUser()
    })
    .catch(() => {})
}

// 关闭抽屉
const handleCloseDrawer = () => {
  drawerData.value.visible = false
  waitUpdateUserData.value = {}
}

// 打开抽屉
const handleOpenDrawer = (data) => {
  waitUpdateUserData.value = { ...data }
  drawerData.value.title = '更新用户'
  drawerData.value.visible = true
}

// 更新用户状态
const handleUpdateUserStatus = async (data) => {
  await ElMessageBox.confirm(`是否确认执行该操作?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const userStatus = (data.userStatus - 1) ** 2
      await userApi.updateUserById({ userId: data.userId, userStatus })
      await handlePageSelectUser()
    })
    .catch(() => {})
}

// 分页查询用户
const handlePageSelectUser = async () => {
  const response = await userApi.pageSelectUser(
    paginationData.value.currentPage,
    paginationData.value.pageSize,
    userSearchCondition.value
  )
  userTableList.value = response.records
  paginationData.value.total = response.total
}

// 切换页面大小
const handleSizeChange = (value) => {
  paginationData.value.pageSize = value
  handlePageSelectUser()
}

// 切换页码
const handleCurrentChange = (value) => {
  paginationData.value.currentPage = value
  handlePageSelectUser()
}
</script>
<template>
  <div class="user-manage">
    <div class="search-condition-item">
      <el-form :inline="true" :model="userSearchCondition">
        <el-form-item label="用户昵称">
          <el-input
            v-model="userSearchCondition.userNickname"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            v-model="userSearchCondition.username"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select
            v-model="userSearchCondition.userStatus"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in userEnum.userStatusEnum"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select
            v-model="userSearchCondition.userType"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in userEnum.userTypeEnum"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlePageSelectUser">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-item">
      <el-table :data="userTableList">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="userNickname" label="用户昵称" width="180" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="userStatus" label="用户状态" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.userStatus === 1 ? 'success' : 'danger'">
              {{
                enumUtil.getLableByValue(
                  userEnum.userStatusEnum,
                  scope.row.userStatus
                )
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="userType" label="用户类型" width="140">
          <template #default="scope">
            {{
              enumUtil.getLableByValue(
                userEnum.userTypeEnum,
                scope.row.userType
              )
            }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="220" />
        <el-table-column prop="updateTime" label="更新时间" width="220" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button
              link
              :type="scope.row.userStatus === 1 ? 'danger' : 'success'"
              size="small"
              @click="handleUpdateUserStatus(scope.row)"
            >
              {{ scope.row.userStatus === 1 ? '禁用' : '启用' }}
            </el-button>
            <!-- TODO 只用超级管理员才能够修改用户 -->
            <el-button
              link
              type="primary"
              size="small"
              @click="handleOpenDrawer(scope.row)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-item">
      <PaginationComponent
        :paginationData="paginationData"
        @sizeChange="handleSizeChange"
        @currentChange="handleCurrentChange"
      ></PaginationComponent>
    </div>

    <div class="drawer-item">
      <el-drawer
        v-model="drawerData.visible"
        :show-close="false"
        @close="handleCloseDrawer"
      >
        <template #header>
          <h4>{{ drawerData.title }}</h4>
        </template>
        <el-form label-width="auto" :model="waitUpdateUserData">
          <el-form-item label="用户昵称">
            <el-input disabled v-model="waitUpdateUserData.userNickname" />
          </el-form-item>
          <el-form-item label="用户名">
            <el-input disabled v-model="waitUpdateUserData.username" />
          </el-form-item>
          <el-form-item label="用户状态">
            <el-select v-model="waitUpdateUserData.userStatus">
              <el-option
                v-for="item in userEnum.userStatusEnum"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="用户类型">
            <el-select v-model="waitUpdateUserData.userType">
              <el-option
                v-for="item in userEnum.userTypeEnum"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleCloseDrawer">取消</el-button>
            <el-button type="primary" @click="handleUpdateUser">确认</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>
<style scoped>
.search-condition-item .el-input {
  width: 210px;
}
.search-condition-item .el-select {
  width: 210px;
}
.el-table {
  width: 100%;
  height: 433px;
}
</style>
